<template>

	<view class="content">
		<view class="top_div">
			<view class="top_left_div">当前科目:<text style="color: #333333; margin-left: 20rpx;">
					{{currCourse}}
				</text></view>
			<view class="top_right_div" @click="selCourse">
				<image src="../../static/tk_icon_switch_lj.png"></image>
				<text>切换科目</text>
			</view>
		</view>
		<view class="err_div">
			<view class="center_div">
				<view>{{wrongSum}}</view>
				<view>错题数</view>
			</view>
		</view>


		<list class="coll_list">
			<cell class="coll_item" v-for="(item,index) in dataList" @tap="itemClick(item.id)">
				<view class="item_left">
					<view>{{item.name}}
						<text style="font-size: 26rpx; color: #777777; margin-left: 10rpx;">
							({{currCourse}})
						</text>
					</view>
					<view>错题：{{item.wsum}}</view>
				</view>
				<view class="item_right">
					<button>查看解析</button>
				</view>
			</cell>
		</list>
		<popCourse v-show="bottomSHow" :courseList="courseList" @courseItemClicks="courseItem"></popCourse>

	</view>
</template>

<script>
	import popCourse from '../../components/course/course.vue';
	export default {
		components: {
			popCourse
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.c = option;
			this.currCourse=this.c.cname;
		},
		data() {
			return {
				c: {},
				bottomSHow: false, //是否显示选择课程
				currCourse: '', //当前课程
				courseId:'',
				wrongSum: 0, //当前课程
				courseList: [],
				dataList: []
			}
		},


		onReady: function() {
			this.initdataList();
		    this.getUserInfo();
			//初始化所有的的课程信息
			uni.request({
				url: this.baseUrl+'getCourseByStuId', //仅为示例，并非真实接口地址。
				method:'POST',
				data: {
					stuId: uni.getStorageSync('uid')
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
				},
				success: (res) => {
					this.courseList=res.data.courseEntity;
				}
			});


		},
		methods: {
			itemClick: function(index) {
				console.log(index);
				//点击某个错误列表
				uni.navigateTo({
					url: '../errorDetial/errorDetail?id=' + index
				});
			},
			courseItem: function(index) {
				//点击某个科目
				this.currCourse = this.courseList[index].name;
				this.c.cid=this.courseList[index].id;
				this.c.cname=this.courseList[index].name;
				this.bottomSHow = false;
			    this.courseId=this.c.cid;
				this.initdataList();
			},
			initdataList:function(){
				
				uni.request({
					url: this.baseUrl + 'getWrongTopic', //获取错题
					method: 'POST',
					data: {
						stuId: uni.getStorageSync('uid'),
						courseId:this.courseId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.map);
						this.dataList=res.data.map.mapList;
						this.wrongSum=res.data.map.wrongSum;
						this.text = 'request success';
					}
				});
			},
			selCourse: function() {
				//点击切换科目
				this.bottomSHow = true;
			},
			getUserInfo:function(){
				//获取当前课程
				var uid=uni.getStorageSync('uid');
				var that=this;
				uni.request({
					url:this.baseUrl + 'student/getStudent',
					method: 'GET',
					data:{
						'stuId':uid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {						
						that.currCourse=res.data.data.courseName;
						that.courseId=res.data.data.courseId;
						this.initdataList();
					}
				})
			}
		}
	}
</script>

<style>
	.top_div {
		height: 76rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
	}

	.top_div .top_left_div {
		font-size: 22rpx;
		color: #666666;
			background-size:100% ;
	}

	.top_div .top_right_div image {
		width: 20rpx;
		height: 20rpx;
	
	}

	.top_div .top_right_div text {
		font-size: 22rpx;
		margin-left: 20rpx;
		color: #e65e4f;
	}

	.err_div {
		height: 386rpx;
		background: url(../../static/errorlist_bg.png);
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.err_div .center_div {
		width: 240rpx;
		height: 240rpx;
		background: url(../../static/errorlist_icon.png);
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.err_div .center_div view:nth-child(1) {
		color: #FFFFFF;
		text-align: center;
		font-size: 60rpx;
	}

	.err_div .center_div view:nth-child(2) {
		color: #FFFFFF;
		text-align: center;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.coll_list {
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.coll_list .coll_item {
		display: flex;
		padding: 20rpx;
		background: #FFFFFF;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #DADADA;
	}

	.coll_list .coll_item .item_left view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
	}

	.coll_list .coll_item .item_left view:nth-child(2) {
		font-size: 28rpx;
		color: #f64f00;
		margin-top: 24rpx;
	}

	.coll_list .coll_item .item_right button {

		height: 52rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 52rpx;
		background: #fe6703;
		border-radius: 26rpx;
	}
</style>
